<template>
  <div class="data-abnormal-detection">
    <!-- 标题 + 操作区域（新增处理告警按钮区域，可根据需求调整） -->
    <div class="header">
      <h2>数据异常检测</h2>
      <!-- 修改按钮文本和事件 -->
      <el-button type="primary" icon="el-icon-search" @click="fetchUnprocessedAlarms">
        查询所有未处理告警
      </el-button>
    </div>
    <!-- 加载状态提示，可结合实际需求展示 -->
    <el-loading v-loading="loading" text="加载中..."></el-loading>
    <!-- 异常数据表格 -->
    <el-table
        :data="abnormalDataList"
        border
        stripe
        fit
        show-overflow-tooltip
        style="width: 100%"
        :row-class-name="tableRowClassName"
    >
      <el-table-column
          type="selection"
          width="50"
          align="center"
      ></el-table-column>
      <el-table-column
          prop="id"
          label="异常ID"
          align="center"
      ></el-table-column>
      <el-table-column
          prop="deviceId"
          label="设备ID"
          align="center"
      ></el-table-column>
      <el-table-column
          prop="paramCode"
          label="参数编码"
          align="center"
      ></el-table-column>
      <el-table-column
          prop="alarmType"
          label="报警类型"
          align="center"
      >
<!--        <template #default="scope">-->
<!--          &lt;!&ndash; TODO-->
<!--          可根据实际需求，将报警类型数字映射为文字，这里先直接展示 &ndash;&gt;-->
<!--&lt;!&ndash;          {{ scope.row.alarmType }}&ndash;&gt;-->
<!--        </template>-->
      </el-table-column>
      <el-table-column
          prop="alarmValue"
          label="报警值"
          align="center"
      ></el-table-column>
      <el-table-column
          prop="thresholdValue"
          label="阈值"
          align="center"
      ></el-table-column>
      <el-table-column
          prop="alarmTime"
          label="报警时间"
          align="center"
      ></el-table-column>
      <el-table-column
          prop="status"
          label="处理状态"
          align="center"
      >
        <template #default="scope">
          <!-- 简单映射处理状态，0 未处理，1 已处理 等，可根据实际调整 -->
          <!-- 根据状态设置不同的Tag类型 -->
          <el-tag :type="scope.row.status === 0 ? 'danger' : 'success'">
            {{ scope.row.status === 0 ? '未处理' : '已处理' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="handlerId"
          label="处理人ID"
          align="center"
      ></el-table-column>
      <el-table-column
          prop="handleTime"
          label="处理时间"
          align="center"
      ></el-table-column>
      <el-table-column
          prop="handleRemark"
          label="处理备注"
          align="center"
      ></el-table-column>
      <el-table-column
          prop="createTime"
          label="报警时间"
          align="center"
      ></el-table-column>
      <el-table-column
          label="操作"
          align="center"
      >
        <template #default="scope">
          <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleSingleAlarmProcess(scope.row)"
              v-if="scope.row.status === 0"
          >
            处理
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件，若有分页需求 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px; text-align: right"
    ></el-pagination>

    <!-- 处理告警弹窗（批量/单个） -->
    <el-dialog
        title="处理告警信息"
        :visible.sync="processDialogVisible"
        width="50%"
    >
      <el-form :model="processForm" label-width="120px">
        <el-form-item label="处理人ID">
          <el-input v-model="processForm.handlerId"></el-input>
        </el-form-item>
        <el-form-item label="处理时间">
          <el-date-picker
              v-model="processForm.handleTime"
              type="datetime"
              placeholder="选择处理时间"
              value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="处理备注">
          <el-input
              type="textarea"
              v-model="processForm.handleRemark"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="processDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmProcessAlarm">确认处理</el-button>
      </template>
    </el-dialog>
  </div>
</template>


<script>



import {api} from "@/api";

export default {
  name: 'DataAbnormalDetection',
  data() {
    return {
      abnormalDataList: [], // 异常数据列表
      loading: false, // 加载状态
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 0, // 总条数
      processDialogVisible: false, // 处理告警弹窗显隐
      processForm: { // 处理告警表单数据
        handlerId: '',
        handleTime: null,
        handleRemark: '',
        alarmId:''  // 存储要处理的异常ID，批量处理时用
      }
    };
  },
  created() {
    this.fetchAbnormalData();
  },
  methods: {

    // 查询所有未处理告警（status=0）
    fetchUnprocessedAlarms() {
      this.loading = true;
      // 传递status=0参数查询未处理告警
      const params = {
        status: 0,
        // 可根据需要决定是否保留分页
        page: this.currentPage,
        pageSize: this.pageSize
      };

      api.data.list(params)
          .then(response => {
            this.abnormalDataList = response.data.records;
            this.total = response.data.total;
            this.loading = false;
            this.$message.success('查询未处理告警成功');
          })
          .catch(error => {
            console.error('查询未处理告警失败:', error);
            this.$message.error('查询未处理告警失败，请稍后重试');
            this.loading = false;
          });
    },


    // 获取异常数据列表
    fetchAbnormalData() {
      this.loading = true;
      const params = {
        page: this.currentPage,
        pageSize: this.pageSize
      }
      api.data.list(params)
          .then(response => {
            this.abnormalDataList = response.data.records;
            this.total = response.data.total;
            this.loading = false;
          })
          .catch(error => {
            console.error('获取异常数据失败:', error);
            this.$message.error('获取异常数据失败，请稍后重试');
            this.loading = false;
          });
    },
    // 每页条数改变
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1;
      this.fetchAbnormalData();
    },
    // 当前页码改变
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.fetchAbnormalData();
    },
    // 表格行样式（可根据状态加不同样式，比如未处理的标红等，可选）
    tableRowClassName({ row }) {
      return row.status === 0 ? 'unprocessed-row' : '';
    },
    // 单个处理告警，打开弹窗并传入当前行数据
    handleSingleAlarmProcess(row) {
      this.processForm.alarmId = row.id;
      this.processForm.handlerId = '';
      this.processForm.handleTime = null;
      this.processForm.handleRemark = '';
      this.processDialogVisible = true;
    },


    // // 确认处理告警，调用后端接口
     confirmProcessAlarm() {

       const requestData = {
        alarmId: this.processForm.alarmId,
        handlerId: this.processForm.handlerId,
        handleTime: this.processForm.handleTime,
        handleRemark: this.processForm.handleRemark
      };
      api.data.processAlarm(requestData)
          .then(() => {
            this.$message.success('告警处理成功');
            this.processDialogVisible = false;
            this.fetchAbnormalData(); // 处理完刷新数据
          })
          .catch(error => {
            console.error('告警处理失败:', error);
            this.$message.error('告警处理失败，请稍后重试');
          });
     }
  }
};
</script>


<style scoped>
.data-abnormal-detection {
  padding: 20px;
}
h2 {
  margin-bottom: 20px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.el-table {
  --el-table-header-text-color: #333;
  --el-table-row-hover-bg-color: #f8f9fa;
}
.unprocessed-row {
  background-color: #ffe6e6; /* 未处理的行标红底色，可选 */
}
.el-dialog__body {
  padding: 20px;
}
.el-form-item {
  margin-bottom: 15px;
}
</style>